<template>
	<ul class="timeline">
		<li class="start"></li>
		<li
			v-for="item in times"
			:key="item.start"
			:class="{ bold: item.bold, recent: recentTime.time == item.start }"
		>
			{{ item.start }}
			<!-- <div v-if="recentTime.time == item.start">
				最近时间
			</div> -->
		</li>
		<li class="end" :class="{ bold: endBold }" v-if="this.lastTime">{{ this.lastTime.end }}</li>
	</ul>
</template>
<script>
import dayjs from "dayjs";
import { last } from "cl-admin/utils";
export default {
	props: {
		list: {
			type: Array,
			default: () => []
		},
		recentTime: {
			type: Object,
			default: () => ({})
		}
	},
	computed: {
		times() {
			return this.list.map(v => ({
				...v,
				bold: dayjs(v.date + " " + v.start).minute() == 0
			}));
		},
		lastTime() {
			return last(this.list);
		},
		endBold() {
			if (!this.lastTime) return false;
			return dayjs(this.lastTime.date + " " + this.lastTime.end).minute() == 0;
		}
	}
};
</script>
<style lang="scss" scoped>
.timeline {
	position: sticky;
	left: 0;
	width: 50px;
	// padding-top: 30px;
	background: #fff;
	z-index: 10;
	box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #fff, 1px 1px 0 0 #fff, inset 1px 0 0 0 #fff,
		inset 0 1px 0 0 #fff;
	li {
		font-size: 14px;
		line-height: 1;
		&:not(:last-child):not(:first-child) {
			height: 50px;
		}
		&:first-child {
			height: 30px;
			background: #fff;
			position: sticky;
			top: 0;
			box-shadow: 1px 0 0 0 #fff, 0 1px 0 0 #fff;
		}
		&:last-child {
			margin-top: -14px;
		}
		&.bold {
			font-weight: 600;
		}
		// &.recent {
		// 	font-weight: 600;
		// 	color: $color-primary;
		// }
	}
}
</style>
